const layer = layui.layer
const laypage = layui.laypage
var laydate = layui.laydate;
var form = layui.form;
// todo 日期layui插件
layui.use(function () {
    // 日期范围 - 左右面板联动选择模式
    laydate.render({
        elem: '#ID-laydate-rangeLinked',
        range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
        rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
    });

})

// todo 封装渲染函数
let resetData = {
    start_time: ``,
    end_time: ``,
    title: ``,
    cateid: ``,
    page: `1`,
    limit: `10`,
}
const getData = {
    start_time: ``,
    end_time: ``,
    title: ``,
    cateid: ``,
    page: `1`,
    limit: `10`,
}
const searchData = {
    start_time: ``,
    end_time: ``,
    title: ``,
    cateid: ``,
    page: `1`,
    limit: `10`,
}
const tbodyObj = document.querySelector(`tbody`)
async function renderList(getData) {
    // alert(1)
    const { data: { data } } = await axios.get(`/ydd_article/list`, {
        params: getData
    })
    // console.log(data);
    tbodyObj.innerHTML = data.data.map(({ id, title, catename, pic, create_date, ishot, istop, status }) => `
         <tr>
         <td>${id}</td>
         <td>${title}</td>
         <td>${catename}</td>
         <td><img src="http://124.223.14.236:8060/${pic}" alt="" style="width: 120px;"></td>
         <td>${dayjs(create_date).format('YYYY-MM-DD')}</td>
         <td><div class="layui-form">
         <div class="layui-input-inline">
             <input type="checkbox" ${ishot ? `checked` : ``} name="ishot" lay-skin="switch" lay-filter="switchTest" title="是|否" class="ck1" disabled>
         </div>
     </div></td>
         <td><div class="layui-form">
         <div class="layui-input-inline">
             <input type="checkbox" ${istop ? `checked` : ``} name="istop" lay-skin="switch" lay-filter="switchTest" title="是|否" class="ck2" disabled>
         </div>
     </div></td>
         <td>${status == 1 ? '已发布' : '待审核'}</td>
         <td>
           <button class="layui-btn layui-btn-normal edit" data-id="${id}"><i class="layui-icon layui-icon-edit"></i>   编辑</button>
           <button class="layui-btn layui-btn-danger del"data-id="${id}"><i class="layui-icon layui-icon-close"></i>   删除</button>
         </td>
       </tr>
    `).join(``)
    form.render()
    renderPage(data)

}

renderList(getData)

// todo 新增业务

const addObj = document.querySelector(`.add`)

addObj.addEventListener(`click`, function () {
    // console.log(1);
    window.parent.document.querySelector(`#add`).click()
})


document.querySelector(`tbody`).addEventListener(`click`, async function (e) {
    // console.log(e.target.dataset.id);
    const id = e.target.dataset.id
    // todo 删除业务
    if (e.target.classList.contains(`del`)) {
        try {
            const res = await axios.get(`/ydd_article/del`, { params: { id } })
            console.log(res);
            layer.msg(`文章删除成功`, { icon: 1 })
            renderList(getData)
        } catch (err) {
            console.log(err);
        }
    }

    // todo 编辑业务
    if (e.target.classList.contains(`edit`)) {
        // console.log(id);
        localStorage.setItem(`editId`, id)
        window.parent.document.querySelector(`#article_edit`).click()
        const arr = Object.values(window.parent.frames)
        // console.log(arr);
        const arr2 = arr.find(ele => ele?.location?.href.includes(`edit.html`))
        // console.log(arr2);
        arr2?.render()
    }
})


// todo 分页模块
function renderPage(data) {
    laypage.render({
        elem: `page-box`, // 绑定分页容器，值可以是容器 id 或 DOM 对象，这里id不能加 # 号
        count: data.count,// 数据总数，从后端得到
        curr: data.currentPage, // 当前第几页(会决定第几个按钮高亮)
        limit: data.pageSize, // 每页显示多少条数据
        limits: [10, 20, 40, 50, 100], //下拉框每一项的数据
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],// 排版
        jump: function (obj, first) {
            //分页切换时会触发该回调函数
            // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据// console.log(obj.limit); // 得到每页显示的条数
            //完成分页切换效果 => 核心就是发ajax请求
            //! 记得修改 query对象 page 、limit 的值
            getData.page = String(obj.curr)
            searchData.page = String(obj.curr)
            getData.limit = String(obj.limit)
            searchData.limit = String(obj.limit)
            //     console.log(query)
            //     console.log(first)
            // true: 分页渲染时
            // undefined:切换分页时
            if (!first) {
                renderList(getData)

            }
            laydate.render({
                elem: '#ID-laydate-rangeLinked',
                range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
                rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
            });
        }
    })
}


// todo 分类渲染
async function renderCate() {
    try {
        const { data: { data: { data } } } = await axios.get(`/ydd_cate/list`)
        // console.log(data);
        document.querySelector(`#cate`).innerHTML = data.map(ele => `<option value=""></option><option value="${ele.id}">${ele.catename}</option>`).join(``)

        // layui 提供的表单重新渲染的方法

        form.render()
    } catch (err) {
        console.log(err);
    }
}
renderCate()


// todo 搜索模块
// layui.use(function () {
//     var $ = layui.$;
//     // 提交事件
//     form.on('submit(demo-submit)', function (data) {
//         alert(1)
//         var field = data.field; // 获取表单全部字段值
//         var elem = data.elem; // 获取当前触发事件的元素 DOM 对象，一般为 button 标签
//         var elemForm = data.form; // 获取当前表单域的 form 元素对象，若容器为 form 标签才会返回。
//         // 显示填写结果，仅作演示用
//         // layer.alert(JSON.stringify(field), {
//         //     title: '当前填写的字段值'
//         // });
//         // // 此处可执行 Ajax 等操作
//         // // …
//         // async function post() {
//         //     const res = await axios.get(`/ydd_article/list`, {
//         //         params: getData
//         //     })
//         // }
//         // post()
//         return false; // 阻止默认 form 跳转
//     });

// });
document.querySelector(`.searchForm`).addEventListener(`submit`, async function (e) {
    e.preventDefault()
    console.log(document.querySelector(`.start_time`).value);
    console.log(document.querySelector(`.end_time`).value);
    console.log(document.querySelector(`.title`).value);
    console.log(document.querySelector(`.cate`).value);
    searchData.start_time = dayjs(document.querySelector(`.start_time`).value).valueOf() ? dayjs(document.querySelector(`.start_time`).value).valueOf() : ``
    searchData.end_time = dayjs(document.querySelector(`.end_time`).value).valueOf() ? dayjs(document.querySelector(`.end_time`).value).valueOf() : ``
    searchData.title = document.querySelector(`.title`).value
    searchData.cateid = document.querySelector(`.cate`).value ? document.querySelector(`.cate`).value : ``
    searchData.page = `1`
    console.log(searchData);
    renderList(searchData)
    // 清空搜索表单数据
    document.querySelector(`.start_time`).value = ``
    document.querySelector(`.end_time`).value = ``
    document.querySelector(`.title`).value = ``
    document.querySelector(`.cate`).value = ``
})

// 重置刷新页面
document.querySelector(`.reset`).addEventListener(`click`, function () {
    renderList(resetData)
})

// todo 搜索栏 控制
document.querySelector(`#hide`).addEventListener(`click`, function () {
    document.querySelector(`.searchForm`).classList.toggle(`hide`)
})

